<template>
  <div>
    <!-- 分配角色 -->
    <el-dialog
      title="提示"
      :visible="dialogVisible"
      width="45%"
      @close="dialogClose"
      @open="dialogOpen">
      <!-- 复选框 -->
        <el-checkbox-group v-model="checkList">
          <!-- 选中的为id 显示的为中文 
          label依旧绑定id作为提交给后端的字段 
          然后通过插槽配合插值表达式渲染显示到页面中的中文-->
            <el-checkbox 
              v-for="item in list" 
              :key="item.id" 
              :label="item.id">
              {{item.name}}
            </el-checkbox>
          </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {assignRole, getEmployeeDetailByid} from '@/api/employees'
import {getRoleList} from '@/api/setting'
import {getUserDetaliById} from '@/api/user'
export default {
  name: 'AssignRole',
  props: {
    dialogVisible: {
      default: false,
      type: Boolean
    },
    curId: {
      default: '',
      type: String
    }
  },
  data() {
    return{
      list:[],
      checkList: []//选中项的label值数组
    }
  },
  mounted() {
    this.fetchRoleList()
  },
  methods: {
    // 在弹框打开时进行数据回填
    async dialogOpen() {
      this.$emit('open-role')
      // 获取当前用户的信息 进行回显
      const res = await getUserDetaliById(this.curId)
      // console.log(res);
      // 回显分配角色数据
      this.checkList = res.roleIds
    },
    // 关闭弹框
    dialogClose() {
      this.$emit('close-role')
      // 清除复选框
      this.checkList = []
    },
    // 获取所有角色列表
    async fetchRoleList() {
      const res = await getRoleList(1,100)
      // console.log('角色',res.rows);
      this.list = res.rows
    },
    // 确定
    async confirm() {
      // 调给员工分配角色的提交接口
      await assignRole({
        id:this.curId, 
        roleIds: this.checkList
      })
      // 关闭弹框
      this.dialogClose()
      // 提示用户
      this.$message.success('分配角色成功')
    },
  }
}
</script>

<style>

</style>